<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表</title>
</head>
<body>
    <style>
        *{
            padding: 0px;
            margin: 0px;
            font-size: 0px;
            box-sizing: border-box;
            list-style: none;
        }

        .box1{
            width: 480px;
            height: 750px;
            background-color: #dcdcdc;
            position: relative;
            overflow: hidden;
        }

        .father{
            position: absolute;
            right: 0px;
            
           
        }

        li[class^=son]{
            display: flex;
            flex-direction:row-reverse;
            position: relative;
            right: -148px;
        }
        
        .left{
            font-size: 18px;
            width: 42px;
            background-color: #1b75a3;
            color: white;
            border: 1px solid black;

        }


        .right{
            width: 148px;
            font-size: 18px;
            color: #9b68af;
            background-color: white;
            border: 1px solid black;
        }

        .son1{
            
            transition: all 0.15s;
        }

        .son2{
            
            transition: all 0.35s;

        }
        
        .son3{
           
            transition: all 0.55s;
          
        }
      
         
        .son4{
          
            transition: all 0.75s;
        }
        .son5{
           
            transition: all 0.95s;
        }

        .son6{
         
            transition: all 1.15s;
        }
        .son7{
          
            transition: all 1.35s;
        }
        .son8{
         
            transition: all 1.55s;
          
        }
        .son9{
           
            transition: all 1.75s;
        }
        .son10{
          
            transition: all 1.95s;

        }
        .son11{
           
            transition: all 2.15s;
        }
        .son12{
           
            transition: all 2.35s;

        }
      
        ul:hover li[class^=son]{
            right: 0px;
        }

        .son1:hover .left{
            background-color: #02b600;
        }
        .son2:hover .left{
            background-color: #02b600;
        }
        .son3:hover .left{
            background-color: #02b600;
        }
        .son4:hover .left{
            background-color: #02b600;
        }
        .son5:hover .left{
            background-color: #02b600;
        }
        .son6:hover .left{
            background-color: #02b600;
        }
        .son7:hover .left{
            background-color: #02b600;
        }
        .son8:hover .left{
            background-color: #02b600;
        }
        .son9:hover .left{
            background-color: #02b600;
        }
        .son10:hover .left{
            background-color: #02b600;
        }
        .son11:hover .left{
            background-color: #02b600;
        }
        .son12:hover .left{
            background-color: #02b600;
        }
            
    
    </style>
    <div class="box1">
        <ul class="father">
            <li class="son1">
                <div class="right">站长素材</div>
                <div class="left">0</div>
            </li>
            <li class="son2">
                <div class="right">站长素材</div>
                <div class="left">1</div>
            </li>
            <li class="son3">
                <div class="right">站长素材</div>
                <div class="left">2</div>
            </li>
            <li class="son4">
                <div class="right">站长素材</div>
                <div class="left">3</div>
            </li>
            <li class="son5">
                <div class="right">站长素材</div>
                <div class="left">4</div>
            </li>
            <li class="son6">
                <div class="right">站长素材</div>
                <div class="left">5</div>
            </li>
            <li class="son7">
                <div class="right">站长素材</div>
                <div class="left">6</div>
            </li>
            <li class="son8">
                <div class="right">站长素材</div>
                <div class="left">7</div>
            </li>
            <li class="son9">
                <div class="right">站长素材</div>
                <div class="left">8</div>
            </li>
            <li class="son10">
                <div class="right">站长素材</div>
                <div class="left">9</div>
            </li>
            <li class="son11">
                <div class="right">站长素材</div>
                <div class="left">10</div>
            </li>
            <li class="son12">
                <div class="right">站长素材</div>
                <div class="left">11</div>
            </li>
            
        </ul>

    </div>

 
</body>
</html>